<template>
    <div class='index'>
        <!-- 主内容标题描述 -->
        <MainTitle :title="userName">
            <p id="hitokoto_text">
                :D 获取中...
                </p>
        </MainTitle>
        <PostBoxList :articleList="articleList"/>
        <Pagination 
        :total='totalArticleNumber' 
        @currentPage='getArticleList'/>
    </div>
</template>

<script>
    import {ref, reactive, inject, h, getCurrentInstance } from 'vue'
    import MainTitle from '@/components/MainTitle.vue'
    import PostBoxList from '@/components/PostBoxList.vue'
    import Pagination from '@/components/Pagination.vue'
    import axios from 'axios' 


    export default {
    components: {
        MainTitle,
        PostBoxList,
        Pagination
    },
    setup() {
         // 初始化博主名,主页文章列表
        const userName = ref('智诚')
        const articleList = ref([])
        const { request, msg, baseUrl } = inject('global')
        const totalArticleNumber = ref(0)
        const currentPage = ref(1)
        const vm = getCurrentInstance()
        

        // 后台获取主页文章数据列表
        const getArticleList = async page => {
            articleList.value.length = 0
            try {
                let response = await request.get('/article/articleList?currentPage=' + page)
                response.data.data.forEach(data => {
                    articleList.value.push(data)
                })
            } catch (err) {
                console.log(err)
                vm.proxy.$notify({
                    title: '错误',
                    message: '获取文章数据列表错误，请检查后端端口',
                    type: 'error'
                })
            } 
            try {
                let response = await request.get('/article/count')
                totalArticleNumber.value = Number(response.data.data)
            } catch (err) {
                console.log(err)
                vm.proxy.$notify({
                    title: '错误',
                    message: '获取文章总数错误，请检查后端接口',
                    type: 'error'
                })
            }
        }

        return {
            userName,
            articleList,
            request,
            totalArticleNumber,
            getArticleList,
            vm,
            currentPage
        }
    },
    mounted() {
        // 一言接口调整处
        fetch('https://v1.hitokoto.cn?c=a&c=b&c=c&c=e')
        .then(response => response.json())
        .then(data => {
        const hitokoto = document.querySelector('#hitokoto_text')
        hitokoto.innerText = data.hitokoto
        })
        .catch(console.error)
        this.getArticleList('1')
    },
}
    
</script>

<style src="@/styles/front-views/index.scss" scoped>

</style>